<template>
    <basic-container>
        <h3>无锡XXX教育科技有限公司</h3>
        <avue-crud
                :option="option"
                :data="data"
                :page="page"
                @row-del="rowDel"
                v-model="form"
                @row-update="rowUpdate"
                @row-save="rowSave"
                :before-open="beforeOpen"
                @search-change="searchChange"
                @search-reset="searchReset"
                @selection-change="selectionChange"
                @current-change="currentChange"
                @size-change="sizeChange"
                @on-load="onLoad"
        >
            <template slot="sex" slot-scope="{row}">
                <span>{{row.sexName}}</span>
            </template>
            <template slot="menuRight">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="handleImport">续费VIP</el-button>
            </template>
        </avue-crud>
    </basic-container>
</template>
<script>
    import { getList, remove, update, add, getNotice } from "@/api/dept/user";
    import { mapGetters } from "vuex";
    import { getToken } from "@/util/auth";

    export default {
        data() {
            return {
                form: {},
                formInline: {
                    user: "",
                    region: ""
                },
                headers: {
                    Authorization: `Basic c3dvcmQ6c3dvcmRfc2VjcmV0`,
                    "Blade-Auth": "bearer " + getToken()
                },
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                selectionList: [],
                option: {
                    tip: false,
                    border: true,
                    index: true,
                    viewBtn: false,
                    addBtn: false,
                    selection: true,
                    columnBtn: false,
                    refreshBtn: false,
                    searchBtn: false,
                    editBtn: true,
                    column: [
                        {
                            label: "续费类目",
                            prop: "name",
                            row: true,
                            search: false,
                            rules: [
                                {
                                    required: true,
                                    message: "请输入姓名搜索",
                                    trigger: "blur"
                                }
                            ]
                        },
                        {
                            label: "续费金额",
                            prop: "email",
                            row: true,
                            rules: [
                                {
                                    required: true,
                                    message: "请输入邮箱",
                                    trigger: "blur"
                                }
                            ]
                        },
                        {
                            label: "延长时长",
                            slot: true,
                            prop: "sex",
                            type: "radio",
                            row: true,
                            rules: [
                                {
                                    required: true,
                                    message: "请输入姓名搜索",
                                    trigger: "blur"
                                }
                            ]
                        },
                        {
                            label: "缴费日期",
                            prop: "phone",
                            row: true,
                            rules: [
                                {
                                    required: true,
                                    message: "请输入手机号码",
                                    trigger: "blur"
                                }
                            ]
                        },
                        {
                            label: "备注",
                            prop: "phone",
                            row: true,
                            rules: [
                                {
                                    required: true,
                                    message: "请输入手机号码",
                                    trigger: "blur"
                                }
                            ]
                        }
                    ]
                },
                data: []
            };
        },
        computed: {
            ...mapGetters(["permission"]),
            permissionList() {
                return {
                    addBtn: this.vaildData(this.permission.notice_add, false),
                    viewBtn: this.vaildData(this.permission.notice_view, false),
                    delBtn: this.vaildData(this.permission.notice_delete, false),
                    editBtn: this.vaildData(this.permission.notice_edit, false)
                };
            },
            ids() {
                let ids = [];
                this.selectionList.forEach(ele => {
                    ids.push(ele.id);
                });
                return ids.join(",");
            }
        },
        created() {
            debugger;
          console.log(this.$route);
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                console.log(res);
                if (res.code != 200) {
                    this.$message({
                        message: res.msg,
                        type: "error"
                    });
                } else {
                    this.$message({
                        message: res.msg,
                        type: "success"
                    });
                    this.onLoad(this.page);
                }
            },
            beforeAvatarUpload(file) {
                var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
                const extension = testmsg === "xls";
                const extension2 = testmsg === "xlsx";
                const isLt2M = file.size / 1024 / 1024 < 10;
                if (!extension && !extension2) {
                    this.$message({
                        message: "上传文件只能是 xls、xlsx格式!",
                        type: "error"
                    });
                }
                if (!isLt2M) {
                    this.$message({
                        message: "上传文件大小不能超过 10MB!",
                        type: "error"
                    });
                }
                return extension || (extension2 && isLt2M);
            },
            rowSave(row, loading, done) {
                add(row).then(
                    () => {
                        loading();
                        this.onLoad(this.page);
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                    },
                    error => {
                        done();
                        console.log(error);
                    }
                );
            },
            rowUpdate(row, index, loading, done) {
                update(row).then(
                    () => {
                        loading();
                        this.onLoad(this.page);
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                    },
                    error => {
                        done();
                        console.log(error);
                    }
                );
            },
            rowDel(row) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(row.id);
                    })
                    .then(() => {
                        this.onLoad(this.page);
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                    });
            },
            searchReset() {
                this.onLoad(this.page);
            },
            searchChange(params) {
                this.onLoad(this.page, params);
            },
            selectionChange(list) {
                this.selectionList = list;
            },
            handleImport() {},
            handleDelete() {
                if (this.selectionList.length === 0) {
                    this.$message.warning("请选择至少一条数据");
                    return;
                }
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(this.ids);
                    })
                    .then(() => {
                        this.onLoad(this.page);
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                        this.$refs.crud.toggleSelection();
                    });
            },
            beforeOpen(done, type) {
                if (["edit", "view"].includes(type)) {
                    getNotice(this.form.id).then(res => {
                        this.form = res.data.data;
                    });
                }
                done();
            },
            currentChange(currentPage) {
                console.log(currentPage);
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            onLoad(page, params = {}) {
                const { releaseTimeRange } = params;
                let values = {
                    ...params
                };
                if (releaseTimeRange) {
                    values = {
                        ...params,
                        releaseTime_gt: releaseTimeRange[0],
                        releaseTime_lt: releaseTimeRange[1]
                    };
                    values.releaseTimeRange = null;
                }
                // getList(page.currentPage, page.pageSize, values).then(res => {
                //     const data = res.data.data;
                //     this.page.total = 0;
                //     this.data = [];
                // });
            }
        }
    };
</script>
<style>
</style>
